<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var \Magento\Braintree\Block\Form $block */
$code = $block->escapeHtml($block->getMethodCode());
$loggedIn = $block->isCustomerLoggedIn();
$storedCards = $block->getStoredCards();
$useVault = $loggedIn && $block->useVault() && count($storedCards);
$autoDetection = $block->isCcDetectionEnabled();
$clientToken = $block->escapeHtml($block->getClientToken());
$formData = [
    "useVault" => $useVault,
    "clientToken" => $clientToken,
    "autoDetection" => $autoDetection,
    "loggedIn" => $loggedIn,
];
$serializedFormData = $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($formData);
$ccType = $block->getInfoData('cc_type');
$ccExpMonth = $block->getInfoData('cc_exp_month');
$ccExpYear = $block->getInfoData('cc_exp_year');
?>
<fieldset class="fieldset items braintree" id="payment_form_<?php /* @noEscape */ echo $code; ?>" style="display:none;">
    <input type="hidden" name="payment[payment_method_nonce]" id="braintree_nonce" value="" />
    <input type="hidden" name="payment[cc_last4]" id="<?php /* @noEscape */ echo $code; ?>_cc_last4" value="" />
    <?php if ($autoDetection) : ?>
        <input type="hidden" id="card_type_autoselect" value="" />
    <?php endif; ?>
    <?php if ($useVault): ?>
        <li id="<?php /* @noEscape */ echo $code; ?>_token_selector">
            <label for="<?php /* @noEscape */ echo $code; ?>_cc_token">
                <?php echo $block->escapeHtml(__('Payment Information')); ?>
            </label>
            <div class="input-box">
                <select id="<?php /* @noEscape */ echo $code; ?>_cc_token" name="payment[cc_token]">
                    <?php foreach ($storedCards as $creditCard): ?>
                        <option value="<?php echo $block->escapeHtml($creditCard->token); ?>"
                            <?php /* @noEscape */ echo $creditCard->default ? ' selected="selected"' : ''; ?>>
                            <?php echo $block->escapeHtml($creditCard->maskedNumber); ?> - <?php echo $block->escapeHtml($creditCard->cardType); ?>
                        </option>
                    <?php endforeach; ?>
                        <option value=''><?php echo $block->escapeHtml(__('Add new card')); ?></option>
                </select>
            </div>
        </li>
    <?php endif; ?>
    <div class="field type required hide_if_token_selected">
        <label for="<?php /* @noEscape */ echo $code; ?>_cc_type" class="label">
            <span><?php echo $block->escapeHtml(__('Credit Card Type')); ?></span>
        </label>
        <div class="control">
            <select id="<?php /* @noEscape */ echo $code; ?>_cc_type"
                    data-mage-init='{"creditCardType":{"creditCardTypeContainer":"#<?php /* @noEscape */ echo $code; ?>_cc_type_ss_div"}}'
                    name="payment[cc_type]" data-validate='{
                        required:true,
                        "validate-cc-type-select":"#<?php /* @noEscape */ echo $code; ?>_cc_number"
                    }' class="select">
                <option value=""><?php echo $block->escapeHtml(__('--Please Select--')); ?></option>
                <?php foreach ($block->getCcAvailableTypes() as $typeCode => $typeName): ?>
                    <option value="<?php echo $block->escapeHtml($typeCode); ?>"
                        <?php if ($typeCode == $ccType): ?> selected="selected"<?php endif; ?>>
                        <?php echo $block->escapeHtml($typeName); ?>
                    </option>
                <?php endforeach ?>
            </select>
        </div>
    </div>
    <div class="field number required hide_if_token_selected">
        <label for="<?php /* @noEscape */ echo $code; ?>_cc_number" class="label">
            <span><?php echo $block->escapeHtml(__('Credit Card Number')); ?></span>
        </label>
        <div class="control">
            <input type="number" id="<?php /* @noEscape */ echo $code; ?>_cc_number" name="payment[cc_number]"
                   title="<?php echo $block->escapeHtml(__('Credit Card Number')); ?>" class="input-text" value=""
                   data-validate='{
                       "required-number":true,
                       "validate-cc-number":"#<?php /* @noEscape */ echo $code; ?>_cc_type",
                       "validate-cc-type":"#<?php /* @noEscape */ echo $code; ?>_cc_type"
                   }'/>
        </div>
    </div>
    <div class="field date required hide_if_token_selected" id="<?php /* @noEscape */ echo $code; ?>_cc_type_exp_div">
        <label for="<?php /* @noEscape */ echo $code; ?>_expiration" class="label">
            <span><?php echo $block->escapeHtml(__('Expiration Date')); ?></span>
        </label>
        <div class="control">
            <div class="fields group group-2">
                <div class="field no-label month">
                    <div class="control">
                        <select id="<?php /* @noEscape */ echo $code; ?>_expiration" name="payment[cc_exp_month]"
                                class="select month" data-validate='{
                                    required:true, "validate-cc-exp":"#<?php /* @noEscape */ echo $code; ?>_expiration_yr"
                                }'>
                            <?php foreach ($block->getCcMonths() as $k => $v): ?>
                                <option value="<?php echo $k ? $block->escapeHtml($k) : ''; ?>"
                                    <?php if ($k == $ccExpMonth): ?> selected="selected"<?php endif; ?>>
                                    <?php echo $block->escapeHtml($v); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
                <div class="field no-label year">
                    <div class="control">
                        <select id="<?php /* @noEscape */ echo $code; ?>_expiration_yr" name="payment[cc_exp_year]" class="select year" data-validate='{required:true}'>
                            <?php foreach ($block->getCcYears() as $k => $v): ?>
                                <option value="<?php /* @noEscape */ echo $k ? $block->escapeHtml($k) : '' ?>"
                                    <?php if ($k == $ccExpYear): ?> selected="selected"<?php endif; ?>>
                                    <?php echo $block->escapeHtml($v); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php if ($block->hasVerification()): ?>
        <div class="field cvv required hide_if_token_selected" id="<?php /* @noEscape */ echo $code; ?>_cc_type_cvv_div">
            <label for="<?php /* @noEscape */ echo $code; ?>_cc_cid" class="label">
                <span><?php echo $block->escapeHtml(__('Card Verification Number')); ?></span>
            </label>
            <div class="control">
                <input type="number" title="<?php echo $block->escapeHtml(__('Card Verification Number')); ?>"
                       class="input-text cvv"
                       id="<?php /* @noEscape */ echo $code; ?>_cc_cid" name="payment[cc_cid]" value=""
                       data-validate='{
                           "required-number":true, "validate-cc-cvn":"#<?php /* @noEscape */ echo $code; ?>_cc_type"
                       }' />
                <?php $content = '<img src=\"' . $block->escapeUrl($block->getViewFileUrl('Magento_Checkout::cvv.png')) .
                    '\" alt=\"' . $block->escapeHtml(__('Card Verification Number Visual Reference')) .
                    '\" title=\"' . $block->escapeHtml(__('Card Verification Number Visual Reference')) . '\" />'; ?>
                <div class="note">
                    <a href="#" class="action cvv" title="<?php echo $block->escapeHtml(__('What is this?')); ?>"
                       data-mage-init='{"tooltip": {"content": "<?php /* @noEscape */ echo $content; ?>"}}'>
                        <span><?php echo $block->escapeHtml(__('What is this?')); ?></span>
                    </a>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <?php if($block->canSaveCard()): ?>
        <li id="<?php /* @noEscape */ echo $code; ?>_store_in_vault_div" style="text-align:left;" class="hide_if_token_selected">
            <input type="checkbox" title="<?php echo $block->escapeHtml(__('Save this card for future use')); ?>" class="input-checkbox"
                   id="<?php /* @noEscape */ echo $code; ?>_store_in_vault" checked="checked" name="payment[store_in_vault]" value="1" />
            <label for="<?php /* @noEscape */ echo $code; ?>_store_in_vault" class="required" style="float:none;">
                <?php echo $block->escapeHtml(__('Save this card for future use')); ?>
            </label>
        </li>
    <?php endif; ?>
</fieldset>
<script type="text/x-magento-init">
    {
        "#payment_form_braintree": {
            "braintreeForm": <?php /* @noEscape */ echo $serializedFormData ?>
        }
    }
</script>
